<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('login_msg')}}</p>
      <div class="operate-area">
        <div class="inline-item search-item">
          <Input v-model="title" @on-enter="searchTable">
            <span slot="prepend">{{$t('pd2OJ1nukLDGQogYog-2V')}}</span>
            <Button
              slot="append"
              icon="ios-search"
              @click="searchTable"
            ></Button>
          </Input>
        </div>
        <div class="inline-item search-item">
          <Input v-model="content" @on-enter="searchTable">
            <span slot="prepend">{{$t('ghaBEXeX_LkakquZCMChC')}}</span>
            <Button
              slot="append"
              icon="ios-search"
              @click="searchTable"
            ></Button>
          </Input>
        </div>
        <div class="inline-item search-item">
          <span class="title">{{$t('2s2wsj14GFiLEJ6tDKsb6')}}：</span>
          <Select v-model="type" @on-change="changeType">
            <Option v-for="t in types" :key="t.value" :value="t.value">{{
              t.label
            }}</Option>
          </Select>
        </div>
        <div class="inline-item search-item">
          <Button
            type="success"
            @click="addItem"
            :style="{ marginRight: '10px' }"
            >{{$t('N8xdbBoV-d6Vc33tKrGGm')}}</Button
          >
          <Button
            type="error"
            @click="deleteItems"
            :style="{ marginRight: '10px' }"
            >{{$t('hND4KLgCabT6swtTJBIUf')}}</Button
          >
        </div>
      </div>
      <Table
        :loading="loading"
        :columns="columns"
        :data="data"
        @on-selection-change="selectChangeHandle"
      >
      </Table>
      <Page
        class="page-component"
        size="small"
        :total="total"
        show-sizer
        show-elevator
        show-total
        :current.sync="current"
        :page-size="pageSize"
        :page-size-opts="pageSizeOpts"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page>
    </Card>
    <Modal
      v-model="modal"
      :title="(status === 'new' ? $t('N8xdbBoV-d6Vc33tKrGGm') : $t('3cH_U2GeBUW1V74W8oDNv')) + $t('lZ_O9EQM7PNLkIJAL64sp')"
      footer-hide
      :mask-closable="false"
    >
      <form-info
        v-if="modal"
        :data="formData"
        :status="status"
        @success="success"
        @fail="fail"
        @close="close"
        @open="open"
      />
    </Modal>
  </div>
</template>

<script>
import { getSystemMsgInfo } from '@/api/data2'
import FormInfo from './component/system-msg-form-info'

const getType = type => {
  if (type === 'system') {
    return this.$t('login_msg')
  } else if (type === 'addStation') {
    return this.$t('fWvBXK8rl3k8SbVFAQ7Yp')
  }
}

export default {
  name: 'system_msg',
  components: {
    FormInfo
  },
  data () {
    return {
      title: '',
      content: '',
      type: 'system',
      loading: false,
      selections: [],
      modal: false,
      types: [
        {
          label: this.$t('login_msg'),
          value: 'system'
        },
        {
          label: this.$t('fWvBXK8rl3k8SbVFAQ7Yp'),
          value: 'addStation'
        }
      ],
      rules: {
        title: [{ required: true, message: this.$t('NqoWPR7MXz20Pft4yFVYR'), trigger: 'blur' }],
        content: [{ required: true, message: this.$t('iRDb_HUcDfLxBU0P5vbTd'), trigger: 'blur' }],
        isValid: [{ required: true, message: '', trigger: 'blur' }],
        type: [{ required: true, message: '', trigger: 'blur' }]
      },
      formData: {
        title: '',
        content: '',
        publishTime: '',
        publisher: '',
        isValid: '',
        type: ''
      },
      columns: [
        {
          type: 'index',
          width: 45,
          align: 'center'
        },
        {
          type: 'selection',
          width: 50,
          align: 'center'
        },
        {
          title: this.$t('pd2OJ1nukLDGQogYog-2V'),
          key: 'title'
        },
        {
          title: this.$t('ghaBEXeX_LkakquZCMChC'),
          key: 'content',
          width: 300
        },
        {
          title: this.$t('oLALRkEG-N50bnJAgwZY4'),
          key: 'publishTime',
          width: 100
        },
        {
          title: this.$t('8kKwQw4uBQ6cg9jHMq08R'),
          key: 'publisher'
        },
        {
          title: this.$t('tzN-4J8uLPV6UJDtYCsk5'),
          key: 'isValid',
          render: (h, params) => {
            return h('span', params.row.isValid === '0' ? this.$t('3_k_lR232l71Wfssfi2sf') : this.$t('3YQOKiOJyy_6u-iVjSTUk'))
          }
        },
        {
          title: this.$t('bEF0mpEFkJ0pb8wucEq9H'),
          key: 'type',
          render: (h, params) => {
            return h('span', getType(params.row.type))
          }
        },
        {
          title: 操作,
          width: 200,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small',
                    icon: 'ios-create'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editItem(params.index)
                    }
                  }
                },
                this.$t('3cH_U2GeBUW1V74W8oDNv')
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                    icon: 'ios-eye'
                  },
                  style: {
                    // marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showItem(params.index)
                    }
                  }
                },
                this.$t('ii2vupCukG5UaIywYapR0')
              )
            ])
          }
        }
      ],
      data: [],
      total: 10,
      current: 1,
      pageSize: 5,
      pageSizeOpts: [5, 10, 15, 20],
      status: 'new',
      editIndex: 0
    }
  },
  created () {
    this.queryTable()
  },
  methods: {
    changeType () {
      this.queryTable()
    },
    searchTable () {
      this.queryTable()
    },
    changeTime () {
      this.queryTable()
    },
    async queryTable ({
      current = this.current,
      pageSize = this.pageSize,
      title = this.title,
      type = this.type
    } = {}) {
      this.loading = true
      const res = await getSystemMsgInfo({
        pageSize,
        current,
        title,
        type
      })
      this.data = res.tableData
      this.total = res.total
      this.loading = false
    },
    changePage (num) {
      this.current = num
      this.queryTable()
    },
    changePageSize (num) {
      this.pageSize = num
      this.queryTable()
    },
    addItem () {
      this.formData = {
        title: '',
        content: '',
        publishTime: '',
        publisher: '',
        isValid: '',
        type: ''
      }
      this.status = 'new'
      this.modal = true
    },
    editItem (index) {
      const item = this.data[index]
      this.formData = _.cloneDeep(item)
      this.editIndex = index
      this.status = 'edit'
      this.modal = true
    },
    showItem (index) {
      const item = this.data[index]
      this.formData = _.cloneDeep(item)
      this.editIndex = index
      this.status = 'show'
      this.modal = true
    },
    deleteItems () {
      this.$Modal.confirm({
        title: this.$t('oiW2WYZoyJSt3j7yCy10e'),
        content: this.$t('KePcPzUJR7hEB6lp4nEtV'),
        onOk: () => {
          const temp = this.data.filter(
            d => !this.selections.find(s => s.id === d.id)
          )
          this.data = temp
          this.$Message.success(this.$t('X3B4zUoYLLk9A5CKgzmbn'))
        }
      })
    },
    selectChangeHandle (selection) {
      console.log('========selectionChange', selection)
      this.selections = selection
    },
    resetPassword () {},
    success (data) {
      if (this.status === 'new') {
        this.data.push(data)
        this.$Message.success(this.$t('Hsf3TzqX4ktuzZVNmVHMe'))
      } else if (this.status === 'edit') {
        this.$set(this.data, this.editIndex, data)
        this.$Message.success(this.$t('rJ9uXBlTbaC-gCrMJyhCy'))
      }
      this.modal = false
    },
    fail () {
      this.modal = false
      this.$Message.error(this.$t('MHI2Om_dS0uQth78Bq07c'))
    },
    close () {
      this.modal = false
    },
    open () {
      this.modal = true
    }
  }
}
</script>
